Public
Edited
Oct 4, 2023
majorsData
vl.markBar()
.data(majorsData)
.encode(
//Code here!
)
.render()
vl.markBar()
.data(majorsData)
.encode(
//Code here!
)
.render()
vl.markPoint({filled: true}) // What happens if filled is false? What is the default?
.data(majorsData)
.encode(
// Code here
)
.render()
vl.markPoint({filled: true})
.data(majorsData)
.encode(
// Code here
)
.render()
vl.markBar()
.data(majorsData)
.encode(
//Code Here
)
.render()
vl.markBar()
.data(majorsData)
.encode(
//Code here
)
.render()
vl.markArea()
.data(majorsData)
.encode(
// Code here
vl.tooltip(['FieldOfStudy', 'Count'])
)
.render()
vl.markLine()
.data(majorsData)
.encode(
//Your code here!
vl.tooltip(['FieldOfStudy', 'Count'])
)
.render()
vl.markRect()
.data(majorsData)
.encode(
//Code here
)
.render()
vl.markBar()
.data(majorsData)
.encode(
//Your code here!
)
//.width(200)
.render()
vl.markArc({"stroke": "#fff"}) //What does setting this stroke property do? Try removing it here.
.data(majorsData)
.encode(
//Code here -- Hint: make sure you use .stack('normalize')!
vl.tooltip(['Year', 'Count'])
)
.render()
vl.markArc({"stroke": "#fff"})
.data(majorsData)
.encode(
//Code here -- remember to use .stack('normalize')!
vl.tooltip(['FieldOfStudy', 'Count'])
)
.render()
vl.markPoint()
.data(majorsData)
.transform(
//Code the pivot here
vl.pivot(/* data field */).value(/* data field */).groupby(/* data field */)
)
.encode(
//Your code here!
)
.render()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
